<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.ld.com/system/tags" prefix="system"%>
    <link type="text/css" rel="stylesheet" href="${ctxPath }/css/news/common.css?2019061303" />
	<link rel="stylesheet" type="text/css" href="${ctxPath }/css/webbot/chat.css?2019082901" />
	<style>
	body {min-width: 200px;}
	</style>
<!-- 内容主体区域 -->
<div class="contentBody">
	<div class="tips">
<c:set var="robotName" value="维多利亚"/>
<c:if test="${type == 3 }">
	<c:set var="robotName" value="小茉莉"/>
		<a href="http://www.itpk.cn/" target="_blank">茉莉机器人</a>是一个能跟用户智能交互的“人”，可以帮用户查询一些实用的资料，比如天气预报、LoL战绩、IP地址等，还拥有一些娱乐系统，比如笑话和抽签等。<br>
		API说明：<a href="http://www.itpk.cn/robot.php" target="_blank">http://www.itpk.cn/robot.php</a><br>
		演示地址：<a href="http://www.itpk.cn/experience.php" target="_blank">http://www.itpk.cn/experience.php</a>
</c:if>
<c:if test="${type == 2 }">
	<c:set var="robotName" value="小i"/>
		<a href="http://open.xiaoi.com/index.jsp" target="_blank">小i机器人</a>小i机器人基于多语种自然语言处理、深度语义交互、语音识别和机器学习等人工智能核心技术推出智能客服系统、在线智能客服机器人等智能客服系统。<br>
		API说明：<a href="http://bbs.xiaoi.com/forum.php?mod=viewthread&tid=2011&extra=page%3D1" target="_blank">http://bbs.xiaoi.com/forum.php?mod=viewthread&tid=2011&extra=page%3D1</a><br>
</c:if>
	</div>
	<div class="qqBox chatContentDiv${type }">
		<div class="BoxHead">
			<div class="headImg">
				<img src="${ctxPath }/images/webbot/6.jpg" />
			</div>
			<div class="internetName">${sessionScope.session_user.userName }</div>
		</div>
		<div class="context">
			<div class="conLeft">
				<ul>
					<li class="bg">
						<div class="liLeft">
							<img src="${ctxPath }/images/webbot/touser.jpg" />
						</div>
						<div class="liRight">
							<span class="intername">${robotName }</span> <span class="infor">[开心]</span>
						</div>
					</li>
				</ul>
			</div>
			<div class="conRight">
				<div class="Righthead">
					<div class="headName">${robotName }</div>
					<div class="headConfig">
						<ul>
							<li><img src="${ctxPath }/images/webbot/top/TIM图片20170926103645_06.jpg" /></li>
							<li><img src="${ctxPath }/images/webbot/top/TIM图片20170926103645_08.jpg" /></li>
							<li><img src="${ctxPath }/images/webbot/top/TIM图片20170926103645_10.jpg" /></li>
							<li><img src="${ctxPath }/images/webbot/top/TIM图片20170926103645_12.jpg" /></li>
						</ul>
					</div>
				</div>
				<div class="RightCont">
					<div class="chatRecordMore">查看更多消息</div>
					<ul class="newsList">
					</ul>
				</div>
				<div class="RightFoot">
					<div class="emjon">
						<ul>
							<li><img src="${ctxPath }/images/webbot/biaoqing/9.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/11.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/12.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/13.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/14.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/15.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/16.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/17.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/18.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/19.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/20.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/21.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/22.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/23.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/24.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/25.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/26.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/27.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/28.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/29.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/30.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/31.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/32.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/33.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/34.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/35.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/36.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/37.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/38.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/39.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/46.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/47.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/48.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/49.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/50.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/66.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/67.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/68.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/69.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/70.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/71.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/72.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/73.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/83.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/84.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/85.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/86.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/87.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/88.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/89.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/90.gif" /></li>
							<li><img src="${ctxPath }/images/webbot/biaoqing/91.gif" /></li>
						</ul>
					</div>
					<div class="footTop">
						<ul>
							<li><img src="${ctxPath }/images/webbot/bottom/font.jpg" /></li>
							<li class="biaoqingbtn"><img src="${ctxPath }/images/webbot/bottom/biaoqing.jpg" /></li>
							<li><img src="${ctxPath }/images/webbot/bottom/jietu.jpg" /></li>
							<li><img src="${ctxPath }/images/webbot/bottom/notice.jpg" /></li>
							<li><img src="${ctxPath }/images/webbot/bottom/picture.jpg" alt="" /></li>
							<li><img src="${ctxPath }/images/webbot/bottom/opendir.jpg" /></li>
						</ul>
					</div>
					<div class="inputBox">
						<textarea id="dope"	style="width: 99%; height: 75px; border: none; outline: none;" name="" rows="" cols=""></textarea>
						<button class="webBotSendBtn" data-url="${ctxPathA }/webbot/send" data-v="${type }">发送(s)</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="${ctxPath }/js/lib/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function() { //闭包，局部生效
			var currTabContE = $(".chatContentDiv${type }");
			var ctxPath = '${ctxPath}';
			// 左侧对话列表
			currTabContE.find('.conLeft li').on('click', function() {
				$(this).addClass('bg').siblings().removeClass('bg');
				var intername = $(this).children('.liRight').children('.intername').text();
				currTabContE.find('.headName').text(intername);
				currTabContE.find('.newsList').html('');
			})
	        currTabContE.find('.webBotSendBtn').on('click', function() {
	        	var news = currTabContE.find('#dope').val();
				if (news == '') {
					alert('不能为空');
				} else {
					currTabContE.find('#dope').val('');
					var str = '';
	                str += '<li>'
	                        + '<div class="nesHead"><img src="'+ctxPath+'/images/webbot/6.jpg"/></div>'
	                        + '<div class="news"><img class="jiao" src="'+ctxPath+'/images/webbot/talk_tail.jpg">'
	                        + news + '</div>' + '</li>';
	                currTabContE.find('.newsList').append(str);
	                setTimeout(answers(news,'online'), 1000);
	                currTabContE.find('.conLeft').find('li.bg').children('.liRight').children('.infor').text(news);
	                currTabContE.find('.RightCont').scrollTop($('.RightCont')[0].scrollHeight);
				}
			});
	        function answers(msg, answerType) {
	        	if(answerType=='online'){
	        		onlineAnswers(msg);
	        	} else {
		        	offlineAnswers(msg);
	        	}
	        }
	        function offlineAnswers(msg) {
		        var arr = [ "你好", "今天天气很棒啊", "你吃饭了吗？", "我最美我最美", "我是可爱的僵小鱼",
		                "你们忍心这样子对我吗？", "spring天下无敌，实习工资850", "我不管，我最帅，我是你们的小可爱",
		                "段友出征，寸草不生", "一入段子深似海，从此节操是路人", "馒头：嗷",
		                "突然想开个车：www.jq22.com", "段子界混的最惨的两个狗：拉斯，普拉达。。。",
		                "<img src='"+ctxPath+"/images/webbot/biaoqing/15.gif'>", "<img src='"+ctxPath+"/images/webbot/biaoqing/13.gif'>",
		                "<img src='"+ctxPath+"/images/webbot/biaoqing/9.gif'>", "<img src='"+ctxPath+"/images/webbot/biaoqing/25.gif'>",
		                "<img src='"+ctxPath+"/images/webbot/biaoqing/38.gif'>", "<img src='"+ctxPath+"/images/webbot/biaoqing/46.gif'>",
		                "<img src='"+ctxPath+"/images/webbot/biaoqing/51.gif'>", "<img src='"+ctxPath+"/images/webbot/biaoqing/68.gif'>",
		                "<img src='"+ctxPath+"/images/webbot/biaoqing/38.gif'>", "<img src='"+ctxPath+"/images/webbot/biaoqing/84.gif'>",
		                "<img src='"+ctxPath+"/images/webbot/biaoqing/33.gif'>", "<img src='"+ctxPath+"/images/webbot/biaoqing/66.gif'>",
		                "<img src='"+ctxPath+"/images/webbot/biaoqing/22.gif'>", "<img src='"+ctxPath+"/images/webbot/biaoqing/16.gif'>",
		                "<img src='"+ctxPath+"/images/webbot/biaoqing/86.gif'>", "<img src='"+ctxPath+"/images/webbot/biaoqing/91.gif'>",
		                "<img src='"+ctxPath+"/images/webbot/biaoqing/73.gif'>", "<img src='"+ctxPath+"/images/webbot/biaoqing/49.gif'>" ];
		        var aa = Math.floor((Math.random() * arr.length));
		        add2Content(arr[aa]);
	        }
	        function onlineAnswers(msg) {
	        	var sendBtnE = currTabContE.find(".webBotSendBtn");
	        	var url = sendBtnE.data("url");
	        	var v = sendBtnE.data("v");
	        	var params = {"content":msg, "type":v};
	        	// parent为父级页面
	        	parent.ShieldJS.ajax.post(url, params, function(data) {
	        		if (data.success) {
				        add2Content(data.data);
	        		}
				});
		        
	        }
	        function add2Content(answers){
	        	var answer = '<li>'
	                + '<div class="answerHead"><img src="'+ctxPath+'/images/webbot/touser.jpg"/></div>'
	                + '<div class="answers"><img class="jiao" src="'+ctxPath+'/images/webbot/receive_tail.jpg">'
	                + answers + '</div>' + '</li>';
				currTabContE.find('.newsList').append(answer);
				currTabContE.find('.RightCont').scrollTop(currTabContE.find('.RightCont')[0].scrollHeight);
		        var newlen = currTabContE.find('.newsList li').length;
		        var lis = currTabContE.find('.newsList li:last').index();
		        var maxlen = newlen - 5;
		        //console.log(lis);
		        if (newlen % 10 > 5) {
		        	currTabContE.find('.chatRecordMore').show();
		        	currTabContE.find('.newsList li:lt(' + maxlen + ')').hide();
		        }
	        }
	        // 表情输入框调出
	        currTabContE.find('.biaoqingbtn').on('click', function() {
		        if (currTabContE.find('.emjon').css('display') == 'none') {
		        	currTabContE.find('.emjon').show();
		        } else {
		        	currTabContE.find('.emjon').hide();
		        }
	        });
	        // 表情
	        currTabContE.find('.emjon li').on('click', function() {
		        var imgSrc = $(this).children('img').attr('src');
		        var str = "";
		        str += '<li>'
		                + '<div class="nesHead"><img src="'+ctxPath+'/images/webbot/6.jpg"/></div>'
		                + '<div class="news"><img class="jiao" src="'+ctxPath+'/images/webbot/talk_tail.jpg"><img class="biaoqingbtnr" src="'+imgSrc+'"></div>'
		                + '</li>';
		        currTabContE.find('.newsList').append(str);
		        setTimeout(answers, 1000);
		        currTabContE.find('.emjon').hide();
		        currTabContE.find('.RightCont').scrollTop($('.RightCont')[0].scrollHeight);
			})
			// 查看更多聊天信息
	        currTabContE.find('.RightCont').on('click', '.chatRecordMore', function() {
	        	currTabContE.find('.newsList li:eq(0),li:gt(0)').show();
	        	currTabContE.find('.chatRecordMore').hide();
	        });
	      	// 回车提交
	    	currTabContE.find("#dope").bind('keypress', function (e) {
	    	    var key = e.which;
	    	    if ( key == 13 || (e.ctrlKey && key == 13 ) ) {
	    	    	currTabContE.find('.webBotSendBtn').click();
	    	    }
	    	});
    	});
	</script>
</div>


